<template>
  <!-- 体检管理 -->
  <div class="box">
    <div class="screen">
      <el-select
        v-model="projectValue"
        clearable
        class="change_type"
        placeholder="请选择项目"
        @change="selectProject"
      >
        <el-option
          v-for="item in project"
          :key="item.examinationName"
          :label="item.examinationName"
          :value="item.examinationName"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="gradeId"
        clearable
        placeholder="全部年级"
        @change="selectGradeId"
      >
        <el-option
          v-for="item in gradeIds"
          :key="item.id"
          :label="item.gradeName"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select v-model="sex" clearable placeholder="全部" @change="selectSex">
        <el-option
          v-for="item in sexs"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="listTab">
      <div class="listHeader">
        <div>
          当前结果:
          <span>总计 {{ total }} 条记录</span>
        </div>
        <el-select
          v-model="allValue3"
          class="zidingyi"
          placeholder="自定义显示列"
          clearable
        >
          <el-option
            v-for="item in all3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="listBody">
        <el-table
          stripe
          :data="tableData"
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="name" label="项目" min-width="15%">
          </el-table-column>
          <el-table-column prop="sex" label="适应性别" min-width="15%">
            <!-- <template slot-scope="scope">{{
              scope.row.sex === 1 ? "男" : "女"
            }}</template> -->
          </el-table-column>
          <el-table-column label="指标" min-width="30%">
            <template slot-scope="scope">
              {{ scope.row.failName }}
            </template>
          </el-table-column>
          <el-table-column label="适应年级" min-width="30%">
            <template slot-scope="scope">
              {{ scope.row.gradeName }}
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作" min-width="15%">
            <template slot-scope="scope">
              <el-select
                v-model="operVal"
                @change="change(scope.row.id, scope.row.readStatus)"
                placeholder="操作"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
    <div class="add_icon" @click="addPhysical">
      <img src="../../../static/img/icon_hdglfbhd@2x.png" alt="" />
    </div>
  </div>
</template>
<script>
import { health, getHeaAndPhyProjectList, getAllGardas } from '@/api/index'
export default {
  data() {
    return {
      project: [], // 项目选项卡
      gradeIds: [], // 年级
      sexs: [{ // 性别
        value: 1,
        label: '男'
      }, {
        value: 2,
        label: '女'
      }],
      all3: [],
      projectValue: null, // 所选项目
      gradeId: null, // 所选年级
      sex: null,  // 所选性别
      allValue3: [],
      // 操作
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '修改'
      }],
      // 总条数
      total: 0,
      // 每页多少条
      pageSize: 8,
      //页码
      page: 1,
      // operVal
      operVal: '',
      // 数据加载时
      loading: true,
      tableData: []
    }
  },
  created() {
    this.getExamTable()
    // this.getProject()
    this.getGarda()
  },
  methods: {
    // 体检管理首页表
    async getExamTable() {
      const orgCode = JSON.parse(sessionStorage.getItem('userMsg')).orgCode
      const res = await health({
        orgId: orgCode,
        pageNo: this.page,
        pageSize: this.pageSize,
        sex: this.sex,
        gradeId: this.gradeId
      })
      console.log('体检管理-首页列表', res);
      if (res.data.errorCode == '0') {
        console.log(this.tableData);
        var arr = res.data.data.list;
        for (let i = 0; i < arr.length; i++) {
          var gradeNameText = [];  //年级列表数组
          var sexs = []; //性别数组
          for (let j in arr[i].ruleList) {
            // ---------年级
            var gradeText = arr[i].ruleList[j].gradeName
            if (gradeNameText.indexOf(gradeText) == -1) {
              gradeNameText.push(gradeText)
            } else if (gradeText == '') {
              return gradeNameText
            } else {
            }
            arr[i].gradeName = gradeNameText.join('、')   //拼接的完全的适应年纪
            // ---------性别
            var sexText = arr[i].ruleList[j].sex
            if (sexText == 0) {
              sexText = '全部'
            } else if (sexText == 1) {
              sexText = '男'
            } else if (sexText == 2) {
              sexText = '女'
            } else if (sexText == null) {
              sexText = ''
            } else {
              sexText = sexText
            }
            if (sexs.indexOf(sexText) == -1) {
              sexs.push(sexText)
            } else if (sexText == '') {
              return sexs
            } else {

            }
            arr[i].sex = sexs.join('、')  //拼接的完全的适应性别
          }
        }
        console.log('dasdsdkkekekeekek', arr);
        this.tableData = arr
        this.total = res.data.data.total
        this.loading = false
      }
    },
    // 获取项目下拉列表
    // async getProject() {
    //   const res = await getHeaAndPhyProjectList()
    //   console.log('体检项目列表：', res);
    //   this.project = res.data.data
    // },
    async getGarda() {
      const data = {
        orgId: JSON.parse(sessionStorage.getItem('userMsg')).orgCode,
        gradeType: JSON.parse(localStorage.getItem('gradeType'))
      }
      const res = await getAllGardas(data)
      console.log('年级:', res);
      this.gradeIds = res.data.data
    },
    // 选择下拉框时触发的回调函数
    selectProject(proVal) {
      this.projectValue = proVal
      this.getExamTable()
    },
    selectSex(sexVal) {
      this.sex = sexVal
      console.log(this.sex);
      setTimeout(() => {
        this.getExamTable()
      }, 1000)
    },
    selectGradeId(gradeIdVal) {
      this.gradeId = gradeIdVal
      this.getExamTable()
    },
    // 操作
    change(id, readStatus) {
      if (this.operVal === '2') {
        this.$router.push({ path: 'taxinfo', query: { type: 1, examineId: id } })
        this.operVal = ''
      } else if (this.operVal === '1') {
        this.$confirm('此操作将删除该体检项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 根据id删除体检项
          if (readStatus == 1) {
            this.$message({
              type: 'warning',
              message: '该项目为只读项，仅可修改年级，不可删除！'
            });
          } else {
            this.delHealth(id)
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        this.operVal = ''
      }
    },
    // 删除体检
    delHealth(id) {
      var orgId = JSON.parse(sessionStorage.getItem('userMsg')).orgCode
      this.$http({
        url: this.$http.wkbbBaseUrl(`examine/delExamine/` + id + `?orgId=` + orgId),
        method: 'DELETE'
      }).then(res => {
        console.log('删除体检', res);
        setTimeout(() => {
          if (res.data.errorCode == 0) {
            this.getExamTable()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        }, 5)
      })
    },
    // 新增体检
    addPhysical() {
      this.$router.push({ path: 'add_examination', query: { type: 0 } })
    },
    // 分页函数
    changePage(newPage) {
      this.page = newPage; //页码
      console.log(newPage);
      this.getExamTable()
    }
  },
  watch: {
    $route(val) {
      console.log(val, "333333333333333");
      this.getExamTable()
    },

  }
}
</script>

<style lang="scss" scoped>
.zidingyi {
  /deep/ .el-input__inner,
  /deep/.el-input .el-input__count .el-input__count-inner {
    background-color: #f7fbfc;
    line-height: 0.2188rem;
    width: 0.9396rem !important;
    border-radius: 0.0521rem;
  }
  /deep/.el-input--medium .el-input__icon {
    line-height: 0.1875rem;
  }
}
/deep/.el-table th {
  font-size: 0.0938rem;
}
.box {
  background-color: #fff;
  border: none;
  position: relative;
  padding: 0.1667rem 0.1406rem;
  border-radius: 0.0781rem;
  .screen {
    display: flex;
    margin: 0;
    padding-bottom: 0.1094rem;
    border-bottom: 0.0052rem #d8f9ed solid;
    .el-select {
      margin-right: 0.1042rem;
    }
    /deep/.el-input--medium .el-input__inner,
    .el-input--suffix .el-input__inner,
    .el-select .el-input__inner {
      background-color: #f7fbfc;
      height: 0.2188rem;
      width: 0.7396rem;
      border-radius: 0.0521rem;
    }
    /deep/.el-input--medium .el-input__icon {
      line-height: 0.1875rem;
    }
  }
  .change_type {
    /deep/ .el-input__inner,
    .el-input--suffix .el-input__inner,
    .el-select .el-input__inner {
      background-color: #f7fbfc;
      height: 0.2188rem;
      width: 0.9396rem !important;
      border-radius: 0.0521rem;
    }
  }
  .listTab {
    .listHeader {
      margin: 0.125rem 0 0.1198rem 0.1042rem;
      display: flex;
      justify-content: space-between;
      div {
        font-size: 0.0729rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #525252;
        line-height: 0.1875rem;
        span {
          color: #888888;
        }
      }
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        background-color: #f7fbfc;
        height: 0.1875rem;
        width: 0.7031rem;
        border-radius: 0.0521rem;
        font-size: 0.0729rem;
      }
    }
    .el-table {
      padding-bottom: 1px;
      /deep/.el-table__body-wrapper tr td{
        border: 1px solid transparent;
        border-right: none;
        border-left: none;
      }
      /deep/.el-table__body-wrapper tr td:first-child {
        border: 1px solid transparent;
        border-right: none;
      }
      /deep/.el-table__body-wrapper tr td:last-child {
        border: 1px solid transparent;
        border-left: none;
      }
      /deep/.el-table__body-wrapper tr:hover td {
        border: 1px solid #8ee7d1;
        border-right: none;
        border-left: none;
        box-sizing: border-box;
      }
      /deep/.el-table__body-wrapper tr:hover td:first-child {
        border: 1px solid #8ee7d1;
        border-right: none;
      }
      /deep/.el-table__body-wrapper tr:hover td:last-child {
        border: 1px solid #8ee7d1;
        border-left: none;
      }
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        width: 0.4479rem;
        height: 0.1875rem;
        background: #f8f8f8;
        border-radius: 0.0938rem;
        padding: 0 0.1042rem 0 0.1302rem;
        color: #888888;
      }
      /deep/.el-input__suffix {
        display: none;
      }
    }
  }
  .add {
    position: fixed;
    right: 2%;
    bottom: 2%;
  }
}
</style>
